<template>
  <h2>ref的另一个作用：可以获取页面中的元素</h2>
  <input type="text" ref="inputRef" />
  <hr/>
  <Child ref="refChild" />
  <hr/>
  <button @click="updateData">更新数据</button>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref} from "vue";
import Child from "./Child.vue";

export default defineComponent({
  name: "RefValue",
  components: {Child},
  // 需求：当页面加载完毕后，页面中的文本框可以直接获取焦点（自动获取焦点）
  setup(){
    const inputRef = ref<HTMLElement | null>(null)
    const refChild = ref<InstanceType<typeof Child>| null>(null)
    // 页面加载后的生命周期组合API
    onMounted(()=>{
      inputRef.value && inputRef.value.focus() //自动获取焦点
    })

    const updateData = () =>{
      console.log(refChild.value?.name)
    }

    return {
      inputRef,
      refChild,
      updateData,
    }
  }
})
</script>

<style scoped>

</style>
